<!DOCTYPE html>
<html lang="zh">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>无标题文档</title>
  <link href="../../css/style.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="../../laydate/laydate.js"></script>
  <script type="text/javascript" src="../../js/jquery.js"></script>
  <script type="text/javascript" src="../../js/api.js"></script>
  <script type="text/javascript" src="../../js/axios.js"></script>
  <script type="text/javascript" src="../../js/commons/messageInfo.js"></script>
	<script type="text/javascript" src="../../js/system/dept/deptList.js"></script>

  <script src="../../js/commons/react.js"></script>
  <script src="../../js/commons/reactDom.js"></script>
  <script src="../../js/commons/babel.js"></script>

  <style>
    .select{
      width: 100px;
      height: 30px;
    }
  </style>

</head>

<body>
  <div class="place"> <span>位置：</span>
    <ul class="placeul">
      <li><a href="../users/userList.html">系统管理</a></li>
      <li><a href="deptList.html">部门管理</a></li>
      <li><a href="#">添加</a></li>
    </ul>
  </div>
  <div class="formbody">
    <div class="formtitle"><span>部门信息</span></div>
    <ul class="forminfo">
      <li>
        <label>部门编号</label>
        <input name="deptId" type="text" class="dfinput" id="deptId" />
        <i>必填，不能超过30个字符</i>
      </li>
      <li>
        <label>部门名称</label>
        <input name="dept" type="text" class="dfinput" id="dept" />
        <i>必填，不能超过30个字符</i>
      </li>
      <li id="select" >
      </li>
      <li>
        <label>&nbsp;</label>
        <input type="button" class="btn" value="确认保存" onclick="save('create')" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" class="btn" value="返回" onclick="window.history.go(-1);" />
      </li>
    </ul>
  </div>
  <script type="text/babel">
    appendMsgBox()

    const Select = () => {
      const [area, setArea] = React.useState(null)
      const [city, setCity] = React.useState(null)

      React.useEffect(() => {
				getArea(setArea, setCity)
			}, [])

      const selectProvince = () => {
        let id = $('#province').val()
        for (let i = 0; i < area.length; i++) {
          if (area[i].id == id) {
            setCity(area[i].city)
            break
          }
        }
      }

      return (
        <div>
          <label>所属区域：</label>
          <select onChange={selectProvince} id="province" className="select">
            <option value={0}>请选择省份</option>
            {area !== null && area.map((item, index) => (<option key={item.id} value={item.id}>{item.pName}</option>))}
          </select>
          <select id='city' className="select">
            <option value={0}>请选择城市</option>
            {city !== null && city.map(item => (<option key={item.id} value={item.id}>{item.cName}</option>))}
          </select>
          <i>请选择省份、城市</i>
        </div>
      )
    }

    ReactDOM.createRoot(document.querySelector('#select')).render(<Select />)
  </script>
</body>

</html>